// 分页组件
import { useRef, useState } from 'react';
import { Input, Select } from 'antd';
import PageNumber from './PageNumber';

// 当前页数hooks
const useCurrent = (props) => {
    const {
        defaultCurrent, // 默认的当前页数
        current, // 当前页数 current存在就是受控组件，不存在就是非受控组件
        onChange, // 页码改变的回调
    } = props;
    const [pageNum, setPageNum] = useState(defaultCurrent || 1); // 当前页数

    // =============current存在就是受控组件，不存在就是非受控组件================
    return {
        current: current === undefined ? pageNum : current, // 当前页数
        onChange: current === undefined ? (...arg) => { // 页码改变的回调
            setPageNum(arg[0].current);
            onChange && onChange(...arg);
        } : onChange,
    };
};

/** 分页组件
 * @param props : {
 *     defaultCurrent, // 默认的当前页数
 *     current, // 当前页数 current存在就是受控组件，不存在就是非受控组件
 *     onChange, // 页码改变的回调
 *     total, // 数据总数
 *     showTotal, // 显示数据总量
 *     pageSizes = [10, 20, 50, 100], // 每页条数数组
 *     showSizeChanger // 是否显示 pageSize 切换器
 *     showQuickJumper // 是否显示 快速跳转至某页
 * }
 */
const Pagination = (props) => {
    const {
        current, // 当前页数
        onChange, // 页码改变的回调
    } = useCurrent(props);
    const {
        total, // 数据总数
        showTotal, // 显示数据总量
        pageSizes = [10, 20, 50, 100], // 每页条数数组
        showSizeChanger, // 是否显示 pageSize 切换器
        showQuickJumper, // 是否显示 快速跳转至某页
    } = props;
    const [pageSize, setPageSize] = useState(pageSizes[0]); // 每页条数
    const pageCount = Math.ceil(total / pageSize); // 总页数

    const [goNum, setGopage] = useState(''); // 快速跳转至某页
    const onGoPage = () => { // 快速跳转至某页
        const reg = /^\+?[1-9][0-9]*$/; // 正整数
        if (reg.test(goNum)) {
            onChange && onChange({
                current: goNum * 1 > pageCount ? pageCount : goNum * 1,
                pageSize,
            });
        }
        setGopage('');
    };

    return (
        <div className='d-flex align-items-center'>
            {/* 总数 */}
            {showTotal && <div className='m-r-8'>{showTotal(total)}</div>}
            {/* 页码 */}
            <PageNumber
                current={current}
                onChange={onChange}
                pageCount={pageCount}
                pageSize={pageSize}
            />
            {/* 分页大小切换 */}
            {
                showSizeChanger && (
                    <Select
                        onChange={num => {
                            setPageSize(num);
                            onChange && onChange({
                                current: current > Math.ceil(total / num) ? Math.ceil(total / num) : current,
                                pageSize: num,
                            });
                        }}
                        options={pageSizes.map(num => ({
                            label: `${num} 条/页`,
                            value: num,
                        }))}
                        value={pageSize}
                    >
                    </Select>
                )
            }
            {/*   快捷跳转 */}
            {
                showQuickJumper && (
                    <div className='m-l-8'>
                        跳至
                        <Input
                            className='w-50 m-x-8'
                            onBlur={onGoPage}
                            onChange={e => setGopage(e.target.value)}
                            onPressEnter={onGoPage}
                            value={goNum}
                        />
                        页
                    </div>
                )
            }
        </div>
    );
};

export default Pagination;
